<!-- 采购管理-基础设置 -->
<template>
  <div class="base-setting">
    <pageHeader :title="title" :breadCrumb="breadCrumb" :isShowBtn="false" />
    <div class="base-setting-warp">
      <div v-for="(item, index) in setting" :key="index">
        <settingWrap
          @goDetail="goDetail(item, index + 1)"
          :name="item.name"
          :description="item.description"
          :icon="item.icon"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { useRouter } from 'vue-router';

  const router = useRouter();
  const title: string = '基础设置';

  const breadCrumb: string[] = ['工厂建模', '基础设置'];

  const setting = reactive([
    {
      name: '工序编号设置',
      description: '-主要用于配置工序编号规则',
      icon: 'icon-settings',
      path: 'WorkSerialNumber',
    },
    {
      name: '工序组编号设置',
      description: '-主要用于配置工序组编号规则',
      icon: 'icon-settings',
      path: 'WorkSerialNumber',
    },
    {
      name: '工位编号设置',
      description: '-主要用于配置工位路线编号规则',
      icon: 'icon-settings',
      path: 'WorkSerialNumber',
    },
    {
      name: '工艺路线编号设置',
      description: '-主要用于配置工艺路线编号规则',
      icon: 'icon-settings',
      path: 'WorkSerialNumber',
    },
    {
      name: '车间编号设置',
      description: '-主要用于配置车间编号规则',
      icon: 'icon-settings',
      path: 'WorkSerialNumber',
    },
    {
      name: '产线编号设置',
      description: '-主要用于配置产线编号规则',
      icon: 'icon-settings',
      path: 'WorkSerialNumber',
    },
  ]);

  const getCategoryMsg = (key: any) => {
    const filterate = {
      1: () => 18,
      2: () => 19,
      3: () => 20,
      4: () => 21,
      5: () => 22,
      6: () => 23,
    };
    return filterate[key] ? filterate[key]() : null;
  };

  const goDetail = (item: any, key: number) => {
    key = getCategoryMsg(key);
    router.push({
      name: item.path,
      query: { key },
    });
  };
</script>

<style scoped lang="less">
  .base-setting {
    &-warp {
      display: flex;
      flex: 1;
      flex-wrap: wrap;
    }
  }
</style>
